<template>
	<view class="ios-box">
		<view class="topBox">
		</view>
		<view class="box-operate">
			<view class="box-image">
				<image mode="aspectFit" src="@/static/img/logo-TikTok.png"></image>
			</view>
			<view class="box-info">
				<view>{{$t('tiktok')}}</view>
				<view>Apple Inc.</view>
				<view>{{$t('ltd')}}</view>
				<view>
					<view @click="Download()">{{$t('install')}}</view>
					<view v-if="$t('trust')">{{$t('trust')}}</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box-center">
			<view class="box-center-one">
				<view>{{$t('average_score')}}</view>
				<view>{{$t('score')}}</view>
				<view>
					<image mode='widthFix' src="@/static/img/xx.png"></image>
				</view>
			</view>
			<view class="line2"></view>
			<view class="box-center-one">
				<view>{{$t('total_rating')}}</view>
				<view>{{$t('total_rating_num')}}</view>
				<view>{{$t('number')}}</view>
			</view>
			<view class="line2"></view>
			<view class="box-center-one">
				<view>{{$t('total_download')}}</view>
				<view>{{$t('total_download_num')}}</view>
				<view>{{$t('frequency')}}</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box-ban">
			<view class="title-box">{{$t('preview')}}</view>
			<view class="box-scroll">
				<view v-for="(it,index) in 5" :key="index">
					<image mode="scaleToFill" :src="'/static/img/'+it+'.png'"></image>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box-produce">
			{{$t('produce')}}
			<view>{{$t('more')}}</view>
		</view>
		<view class="line"></view>
		<view class="box-grade">
			<view class="title-box">
				{{$t('ratings_and_reviews')}}
				<text>{{$t('see_all')}}</text>
			</view>
			<view>
				<view class="grade-left">
					<view>{{$t('grade')}}</view>
					<view>{{$t('out_of_5')}}</view>
				</view>
				<view class="grade-right">
					<view class="box-group-items">

						<view class="box-group">
							<view>
								<view>{{$t('star_5')}}</view>
								<view class="bar">
									<view style="width:300rpx ;"></view>
								</view>
							</view>
						</view>
						<view class="box-group">
							<view>
								<view>{{$t('star_4')}}</view>
								<view class="bar">
									<view style="width:10rpx;"></view>
								</view>
							</view>
						</view>
						<view class="box-group">
							<view>
								<view>{{$t('star_3')}}</view>
								<view class="bar">
									<view style="width:10rpx;"></view>
								</view>
							</view>
						</view>
						<view class="box-group">
							<view>
								<view>{{$t('star_2')}}</view>
								<view class="bar">
									<view style="width:10rpx;"></view>
								</view>
							</view>
						</view>
						<view class="box-group">
							<view>
								<view>{{$t('star_1')}}</view>
								<view class="bar">
									<view style="width:10rpx;"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="bot">{{$t('ratings')}}</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box-comment">
			<view class="c1">{{$t('star_5')}}</view>
			<view class="c2">{{$t('comment_time')}}</view>
			<view class="c3">{{$t('what_think')}}</view>
			<view class="c4">{{$t('comment_inner')}}</view>
			<view class="c5">{{$t('more')}}</view>
		</view>
		<view class="line"></view>
		<view class="box-privacy">
			<view class="box-privacy-top title-box">
				<view>{{$t('app_privacy')}}</view>
				<view>{{$t('see_details')}}</view>
			</view>
			<view class="box-privacy-txt">
				{{$t('developer_tiktok')}}
				<text>{{$t('developer_policy')}}</text>
			</view>
			<view class="box-privacy-card">
				<image mode="widthFix" src="/static/img/tiktok-privacy.png"></image>
				<view>{{$t('track_you')}}</view>
				<view>
					{{$t('following_data')}}:
				</view>
				<view class="box-bt">
					<view>
						<image mode="widthFix" src="../static/a/3.png"></image>Contact Info
					</view>
					<view>
						<image mode="widthFix" src="../static/a/8.png"></image>ldentifiers
					</view>
				</view>
			</view>

			<view class="box-privacy-card">
				<image mode="widthFix" src="/static/img/tikitok-about.png"></image>
				<view>{{$t('link_you')}}</view>
				<view>{{$t('following_identity')}}</view>
				<view class="box-bt">
					<view>
						<image mode="widthFix" src="../static/a/0.png"></image>
						{{$t('purchases')}}
					</view>
					<view>
						<image mode="widthFix" src="../static/a/1.png"></image>
						{{$t('financial_info')}}
					</view>
				</view>
				<view class="box-bt">
					<view>
						<image mode="widthFix" src="../static/a/2.png"></image>
						{{$t('location')}}
					</view>
					<view>
						<image mode="widthFix" src="../static/a/3.png"></image>
						{{$t('contact_info')}}
					</view>
				</view>
				<view class="box-bt">
					<view>
						<image mode="widthFix" src="../static/a/4.png"></image>
						{{$t('contacts')}}
					</view>
					<view>
						<image mode="widthFix" src="../static/a/5.png"></image>
						{{$t('user_content')}}
					</view>
				</view>
				<view class="box-bt">
					<view>
						<image mode="widthFix" src="../static/a/6.png"></image>
						{{$t('search_history')}}
					</view>
					<view>
						<image mode="widthFix" src="../static/a/7.png"></image>
						{{$t('browsing_history')}}
					</view>
				</view>
				<view class="box-bt">
					<view>
						<image mode="widthFix" src="../static/a/8.png"></image>
						{{$t('identifiers')}}
					</view>
					<view>
						<image mode="widthFix" src="../static/a/9.png"></image>
						{{$t('user_data')}}
					</view>
				</view>
				<view class="box-bt">
					<view>
						<image mode="widthFix" src="../static/a/10.png"></image>
						{{$t('diagnostics')}}
					</view>
					<view>
					</view>
				</view>
			</view>
			<view class="box-privacy-txt">
				{{$t('practices_vary')}}
				<view>{{$t('learn_more')}}</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box-information">
			<view class="title-box" style="margin:0 ;">
				{{$t('information')}}
			</view>
			<view class="info-box">
				<view>{{$t('seller')}}</view>
				<view>{{$t('seller_ltd')}}</view>
			</view>
			<view class="line"></view>
			<view class="info-box">
				<view>{{$t('size')}}</view>
				<view>{{$t('size_mb')}}</view>
			</view>
			<view class="line"></view>
			<view class="info-box">
				<view>{{$t('category')}}</view>
				<view>{{$t('entertainment')}}</view>
			</view>
			<view class="line"></view>
			<view class="info-box">
				<view>{{$t('compatibility')}}</view>
				<view>{{$t('iPhone')}}
					<image mode="widthFix" src="../static/img/down.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="info-box">
				<view>{{$t('languages')}}</view>
				<view>{{$t('english')}}
					<image mode="widthFix" src="../static/img/down.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="info-box">
				<view>{{$t('age_rating')}}</view>
				<view>{{$t('age_17')}}
					<image mode="widthFix" src="../static/img/down.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="info-box">
				<view>{{$t('price')}}</view>
				<view>{{$t('free')}}</view>
			</view>
			<view class="line"></view>
			<view class="info-box">
				<view>{{$t('copyright')}}</view>
				<view>{{$t('tiktok_2020')}}</view>
			</view>
			<view class="line"></view>
			<view class="info-box">
				<view class="blue-box">{{$t('privacy_policy')}}</view>
				<view>
					<image mode="widthFix" src="../static/img/Privacy-Policy.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="info-box">
				<view class="blue-box">{{$t('a_problem')}}</view>
				<view>
					<image mode="widthFix" src="../static/img/problem.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="title-box">
				{{$t('support')}}
			</view>
			<view class="box-over-tiktok">
				<image class="Siri" mode="widthFix" src="../static/img/Siri.png"></image>
				<view>
					<view>{{$t('siri')}}</view>
					<view>{{$t('your_voice')}}</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="title-box">
				{{$t('more_developer')}}
			</view>
			<view class="box-over-tiktok">
				<image class="TikTokShopSellerCenter" mode="widthFix" src="../static/img/TikTokShopSellerCenter.png">
				</image>
				<view>
					<view>{{$t('tiktok_shop_center')}}</view>
					<view>{{$t('shopping')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "IOS",
		data() {
			return {

			};
		},

		methods: {
			Download() {
				this.$emit('download')
			}
		}
	}
</script>

<style lang="scss">
	@import '@/pages/index/IOS.scss';

	.title-box {
		width: 690rpx;
		margin: 12rpx auto 24rpx;
		display: flex;
		justify-content: space-between;
		font-family: 'Medium';
		font-weight: 500;
		font-size: 36rpx;
		color: #000000;
	}

	.blue-box {
		color: #007AFF !important;
	}
</style>